<template>
	<view class="modal-wrap" :class="[value ? 'show-modal' : 'hidd-modal']" :style="[value ? modalZindexComputed : {}]">
		<view class="wui-mask" :style="[maskZindexComputed]" @click="maskClick">
			<view class="wui-modal" @click.stop.prevent="() => false">
				<view class="modal-title">
					<text>{{ title }}</text>
					<text v-if="closeIcon" class="close iconfont icon-wui-close" @click.stop.prevent="close"></text>
				</view>
				<view class="modal-content"><slot></slot></view>
				<block v-if="customBottom"><slot name="bottom"></slot></block>
				<view class="modal-options" v-else>
					<view class="modal-options-btn modal-options-submit" hover-class="modal-options-btn-hover" @click.stop.prevent="submit">
						<text v-if="loading" class="iconfont icon-wui-loading loading"></text>
						<text v-else>{{ confirmText }}</text>
					</view>
					<view class="modal-options-btn-division"></view>
					<view class="modal-options-btn modal-options-cancel" hover-class="modal-options-btn-hover" @click.stop.prevent="cancel">
						<text>{{ cancelText }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'w-modal',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: '提示'
		},
		// 异步关闭
		asyncClose: {
			type: Boolean,
			default: false
		},
		// 点击遮罩层关闭
		maskClose: {
			type: Boolean,
			default: true
		},
		confirmText: {
			type: String,
			default: '确定'
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		// 隐藏右上角关闭图标
		closeIcon: {
			type: Boolean,
			default: true
		},
		// 自定义底部内容
		customBottom: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		value(val) {
			if (val) this.loading = false;
			this.$emit('input', val);
		}
	},
	data() {
		return {
			loading: false
		};
	},
	computed: {
		modalZindexComputed() {
			return {
				zIndex: this.uniWuiConfig.zIndex.modal
			};
		},
		maskZindexComputed() {
			return {
				zIndex: this.uniWuiConfig.zIndex.modal - 1
			};
		}
	},
	methods: {
		maskClick() {
			this.$emit('input', !this.maskClose);
		},
		submit() {
			if (!this.asyncClose) {
				this.$emit('input', false);
			} else {
				this.loading = true;
			}
			this.$emit('submit');
		},
		cancel() {
			this.$emit('input', false);
			this.$emit('cancel');
		},
		close() {
			this.$emit('input', false);
			this.$emit('close');
		}
	}
};
</script>

<style lang="scss" scoped>
/* 按钮loading动画 */
@keyframes loadingAnimation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.modal-wrap {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.3s;

	.wui-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.62);
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.4s;

		.wui-modal {
			width: 85%;
			background-color: #f8f8f8;
			border-radius: 10rpx;
			overflow: hidden;
			transition: all 0.4s;

			.modal-title {
				position: relative;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				background-color: #fff;
				color: #646566;

				.close {
					position: absolute;
					top: 0;
					right: 0;
					height: 100%;
					width: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #ff5757;
					font-size: 38rpx;
				}
			}

			.modal-content {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20rpx 0;
			}

			.modal-options {
				display: flex;
				height: 90rpx;
				align-items: center;
				background-color: #fff;

				.modal-options-btn {
					flex: 1;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.modal-options-btn-division {
					height: 50%;
					width: 2rpx;
					display: flex;
					align-items: center;
					font-weight: 100;
					background-color: #ebebeb;
				}

				.modal-options-submit {
					color: #0081ff;

					.loading {
						animation: loadingAnimation 2s linear infinite;
					}
				}

				.modal-options-cancel {
					color: #333;
				}

				.modal-options-btn-hover {
					opacity: 0.7;
					background-color: #e6e6e6;
				}
			}
		}
	}
}

.show-modal {
	z-index: 9950;

	.wui-mask {
		opacity: 1;

		.wui-modal {
			opacity: 1;
			transform: scale(1, 1);
		}
	}
}

.hidd-modal {
	z-index: -10;

	.wui-mask {
		opacity: 0;

		.wui-modal {
			opacity: 0;
			transform: scale(1.2, 1.2);
		}
	}
}
</style>
